<template>
  <div
    :style="{
      width: `${(row + 1) * 36 * props.scale}px`,
      height: `${(cols + 1) * 36 * props.scale}px`,
    }"
  >
    <div
      class="storage-box"
      :style="{
        width: `${(row + 1) * 36}px`,
        height: `${(cols + 1) * 36}px`,
        transform: `scale(${props.scale})`,
        transformOrigin: '0 0',
      }"
    >
      <div style="margin-left: 32px">
        <div class="top-num" v-for="item in row" :key="item">
          {{ item }}
        </div>
      </div>
      <div style="display: flex">
        <div>
          <div class="left-num" v-for="item in cols" :key="item">
            {{ item }}
          </div>
        </div>
        <div>
          <div v-for="ai in cols" :key="ai" style="height: 32px; margin-bottom: 3px; display: flex">
            <div class="box-item" v-for="item in row" :key="item">
              <div class="sphere drag-box" v-show="data[(ai - 1) * row + item - 1]?.isShow">
                <span style="font-size: 0">{{ data[(ai - 1) * row + item - 1]?.text }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const props = defineProps({
  row: { type: Number, default: 10 },
  cols: { type: Number, default: 10 },
  scale: { type: Number, default: 1 },
  list: {
    type: Array,
    default: () => [],
  },
});
watch(
  () => props.list,
  () => {
    update();
  },
);
const data = ref<any[]>([]);

for (let index = 0; index < 100; index++) {
  data.value.push({
    text: index,
    isShow: false,
  });
}
const rest = () => {
  data.value.forEach((item) => {
    item.isShow = false;
  });
};
const update = () => {
  rest();
  data.value = new Array(props.cols * props.row).fill({
    text: '',
    isShow: false,
  });
  props.list.forEach((item: any) => {
    item.text = item.strainIndex;
    item.isShow = true;
    let index = item.strainIndex || item.strainIndex === 0 ? item.strainIndex : item.sortIndex;
    data.value[index] = item;
  });
};
</script>
<style lang="less" scoped>
.storage-box {
  width: 400px;
  height: 400px;
  border-radius: 5px;

  .top-num {
    height: 32px;
    width: 32px;
    display: inline-block;
    text-align: center;
    margin: 0 3px 3px 0;
    line-height: 40px;
  }

  .left-num {
    height: 32px;
    width: 32px;
    text-align: center;
    margin: 0 0 3px 0;
    line-height: 32px;
  }

  .box-item {
    height: 32px;
    width: 32px;
    display: inline-block;
    background-color: #efefef;
    margin: 0 3px 0 0;

    .sphere {
      height: 32px;
      width: 32px;
      border-radius: 16.5px;
      background-color: skyblue;
    }
  }
}

.drag-box[dragging] {
  height: 32px;
  width: 32px;
  border-radius: 16.5px;
  background-color: skyblue;
}

.dropbox[over] {
  display: none;
}
</style>
